<!--  -->

<style lang='scss' type='stylesheet/scss' scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .content-warpper {
    flex: 1;
    border: solid 10px #151515;
    box-sizing: border-box;
    height: calc(100vh - 96px);
    border-top: none;
    display: flex;
    flex-direction: column;
    .scroll {
      flex: 1;
    }
  }
}
</style>

<template>
  <div class="home-container"
       @contextmenu.prevent.stop
       ref="homeContainer">
    <home-nav class="home-nav"></home-nav>
    <home-header class="home-header"
                 @rename="rename"
                 @moveTo="moveTo"
                 @copyTo="copyTo"
                 @addFolder="addFolder"></home-header>
    <div class="content-warpper">
      <home-bread class="home-bread"></home-bread>
      <list-header class="list-header"></list-header>
      <el-scrollbar class="scroll"
                    id="file-list-scroll">
        <file-list class="file-list"
                   @moveTo="moveTo"
                   @copyTo="copyTo"
                   ref="fileList"
                   :file.sync="file"></file-list>
      </el-scrollbar>
    </div>

    <picture-view :file.sync="file"
                  v-if="file"></picture-view>

    <upload-mask v-if="uploadVisible"></upload-mask>

    <handler-box v-if="hanlderVisible"
                 :handlerType="handlerType"
                 :visible.sync="hanlderVisible"></handler-box>

    <upload-list></upload-list>
  </div>
</template>

<script type='text/ecmascript-6'>
import homeNav from "../../layout/admin/adminNav";
import homeHeader from "./header";
import homeBread from "./bread";
import listHeader from "./listHeader";
import fileList from "./fileList";
import pictureView from "./pictureView";
import uploadMask from "./uploadMask";
import handlerBox from "./handlerBox";
import uploadList from "./uploadList";
export default {
  components: {
    homeNav,
    homeHeader,
    homeBread,
    listHeader,
    fileList,
    pictureView,
    uploadMask,
    handlerBox,
    uploadList
  },
  data() {
    return {
      file: null,
      uploadVisible: false,
      timeout: null,
      handlerType: "",
      hanlderVisible: false
    };
  },
  created() {
    this.$store.dispatch("file/getFileList");
  },
  mounted() {
    this.$refs.homeContainer.ondragleave = e => {
      e.preventDefault(); // 阻止离开时的浏览器默认行为

      this.timeout = setTimeout(() => {
        this.uploadVisible = false;
      }, 100);
    };
    this.$refs.homeContainer.ondrop = e => {
      e.preventDefault(); // 阻止拖放后的浏览器默认行为
      clearTimeout(this.timeout);
      this.uploadVisible = false;

      const data = e.dataTransfer.files; // 获取文件对象
      if (data.length < 1) {
        return; // 检测是否有文件拖拽到页面
      }
      this.isUpload = false;

      for (let index = 0; index < data.length; index++) {
        let file = data[index];
        this.$store.commit("file/ADD_UPLOAD_LIST", file);
      }
    };
    this.$refs.homeContainer.ondragenter = e => {
      e.preventDefault(); // 阻止拖入时的浏览器默认行为
      this.uploadVisible = true;
      clearTimeout(this.timeout);
    };
    this.$refs.homeContainer.ondragover = e => {
      e.preventDefault(); // 阻止拖来拖去的浏览器默认行为
      clearTimeout(this.timeout);
      this.uploadVisible = true;
    };
  },
  methods: {
    moveTo() {
      this.handlerType = "MOVE";
      this.hanlderVisible = true;
    },
    copyTo() {
      this.handlerType = "COPY";
      this.hanlderVisible = true;
    },
    rename() {
      this.$refs.fileList.rename();
    },
    addFolder() {
      this.$refs.fileList.addFolder();
    },
    createFolders() {
      let folders = [];
      for (let i = 0; i < Math.random() * 10; i++) {
        folders.push(this.createFolder());
      }
      return folders;
    },
    createFolder() {
      let id = parseInt(Math.random() * 1e9);
      let folder = {
        id,
        name: "" + parseInt(Math.random() * 1e9),
        updateTime: new Date(),
        type: "folder",
        children: [],
        open: false
      };

      folder.children = folder.children.concat(this.createFiles(id));

      return folder;
    },
    createFiles(parentId) {
      let files = [];

      for (let i = 0; i < Math.random() * 20; i++) {
        files.push(this.createFile(parentId));
      }

      return files;
    },
    createFile(parentId) {
      return {
        id: parseInt(Math.random() * 1e9),
        name: "" + parseInt(Math.random() * 1e9),
        updateTime: new Date(),
        size: parseInt(Math.random() * 1e6),
        parentId,
        path: require(`../../assets/images/${parseInt(Math.random() * 12) +
          1}.jpeg`),
        type: "jpg"
      };
    }
  }
};
</script>
